<template>
  <el-dialog :visible.sync="visible" width="80%" top="0" v-if="!loading">
    <TableSearch
      ref="tableSearch"
      title="选择商品"
      selection
      :columns="columns"
      :api="getList"
      @selection-change="onSelectionChange"
    >
      <template slot="picUrl" slot-scope="{ row }">
        <el-image
          v-if="row.picUrl"
          class="item-img"
          :src="row.picUrl"
          :preview-src-list="[row.picUrl]">
        </el-image>
      </template>
    </TableSearch>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="onConfirm" :disabled="!this.selected.length">确 定({{this.selected.length}})</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { omit } from 'lodash';
import TableSearch from '@/components/TableSearch/TableSearch';
import { createTableColumns } from '@/components/TableSearch/utils';
import { itemQuery } from '@/api/purchase/goods';
import { categoryList } from '@/api/category';

export default {
  name: 'GoodsSelect',

  components: {
    TableSearch,
  },

  props: {
    title: {
      type: String,
      default: '选择商品',
    },
  },

  data () {
    return {
      categoryList: [],
      visible: false,
      loading: true,
      selected: [],
    };
  },

  async created () {
    this.loading = true;
    await this.getCategoryList();
    this.loading = false;
  },

  computed: {
    columns () {
      const { formatAmount } = this.$util;

      const categoryOptions = {
        formatter: val => val ? val.join(',') : '-',
        search: {
          component: {
            is: 'el-cascader',
            props: {
              style: { width: '100%' },
              options: this.categoryList,
              showAllLevels: false,
              props: {
                value: 'id',
                label: 'name',
                children: 'children',
              },
            },
          },
        },

      };
      return createTableColumns([
        ['商品名称', 'name', { search: true }],
        ['商品类目', 'categoryNames', categoryOptions],
        ['品牌', 'brand', { search: true }],
        ['规格', 'attribute'],
        ['图片', 'picUrl'],
        ['参考价(元)', 'referencePrice', { formatter: val => formatAmount(val) }],
      ]);
    },
  },

  methods: {
    async getCategoryList () {
      this.categoryList = await categoryList();
    },

    async getList (pageIndex, pageSize, query) {
      const cidLev3 = query.categoryNames && query.categoryNames.length === 3 ? query.categoryNames[2] : null;
      query = {
        pageIndex,
        pageSize,
        cidLev3,
        ...omit(query, ['categoryNames']),
      };
      console.log(query);
      return await itemQuery(query);
    },

    onConfirm () {
      this.$emit('confirm', this.selected);
      this.visible = false;
    },

    onSelectionChange ($event) {
      console.log('$event', $event);
      this.selected = $event;
    },

    open () {
      this.selected = [];
      this.visible = true;
      if (this.$refs.tableSearch) {
        this.$refs.tableSearch.clearSelection();
      }
    },
  },
};
</script>
